<template>
  <div class="CommentInfo" ref="CommentInfo">
    <van-cell-group>
      <van-cell border title="用户评价" is-link value="更多" />
    </van-cell-group>
    <!-- 用户信息 -->
    <div class="ml-1 mr-1">
      <div class="message">
        <!-- 用户头像 -->
        <img class="img" :src="props.commentUser.avatar" alt="" />
        <!-- 用户姓名 -->
        <span>{{ props.commentUser.uname }}</span>
      </div>
      <!-- 评语 -->
      <p>{{ props.info.content }}</p>
      <!-- 评价时间和 商品信息 -->
      <div class="info">
        <!-- <span>2018-09-24</span> -->
        <span class="mr-1">{{ commenTime }}</span>
        <span>{{ props.info.style }}</span>
      </div>
    </div>
  </div>
</template>

<script setup="props">
import { defineProps, onMounted, ref,getCurrentInstance } from "vue";
import moment from "moment";
// 获取 this 
const ctx = getCurrentInstance()
const props = defineProps({
  info: {
    type: Object,
    default: () => [],
  },
  commentUser: {
    type: Object,
    default: () => [],
  },
});
// 格式化时间
let date = new Date(props.info.created * 1000);
const commenTime = moment(date.getTime()).format("YYYY-MM-DD");
// 吧 ref 传递出去
const CommentInfo = ref()
onMounted(() => {
  ctx.emit('CommentInfo',CommentInfo.value)
})
</script>

<style lang="scss" scoped>
.CommentInfo {
  border-bottom: 8px solid #f2f5f8;
  padding-bottom: 30px;
}
.message {
  display: flex;
  align-items: center;
  margin-top: 10px;
  span {
    font-size: 15px;
    color: #333333;
  }
}
p {
  font-size: 14px;
  color: #777777;
}
.img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-right: 10px;
}
.info {
  span {
    font-size: 12px;
    color: #999999 !important;
  }
}
</style>